<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生表CRUD</title>
    <!--    注意idea的提示不一定正确,慎重-->
    <!--    根路径为static-->
    <link rel="stylesheet" href="/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.css">
    <script src="/bootstrap/jquery.js"></script>
    <script src="/bootstrap/bootstrap.bundle.js"></script>
    <script src="/bootstrap/bootstrap.min.js"></script>
    <script src="/plugins/bootstraptable/bootstrap-table.js"></script>
    <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>


</head>
<body>


<div class="container">
    <div class="row">
        <form class="form-inline">
            <div class="form-group mx-sm-3 mb-2 ">
                <label for="searchName" class="sr-only">输入姓名</label>
                <input type="text" class="form-control " id="searchName" placeholder="姓名">
                <label for="searchName" class="sr-only">输入姓名</label>
                <input type="text" class="form-control" id="searchNo" placeholder="学号">
                <select class="form-control" id="searchSex">
                    <option value="" selected="selected">未知</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
            <button type="button" class="btn btn-primary mb-2" onclick="search()">查询</button>
            <button type="button" class="btn btn-primary  mb-2 ml-2" data-toggle="modal" data-target="#addStudentModal">新增
            </button>
        </form>
        <table class="table" id="stuTable">


        </table>
    </div>

</div>

<!--新增学生的模态框-->
<div class="modal fade" id="addStudentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新增学生信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formInsertStudent">
                    <div class="form-group">
                        <label for="add-name">姓名</label>
                        <input type="text" class="form-control" id="add-name" placeholder="输入姓名" name="name">
                    </div>
                    <div class="form-group">
                        <label for="add-no">学号</label>
                        <input type="text" class="form-control" id="add-no" placeholder="输入学号" name="no">
                    </div>
                    <div class="form-group">
                        <label for="add-password">密码</label>
                        <input type="password" class="form-control" id="add-password" placeholder="输入密码"
                               name="password">
                    </div>
                    <div class="form-group">
                        <label for="add-age">年龄</label>
                        <input type="text" class="form-control" id="add-age" placeholder="输入年龄" name="age">
                    </div>
                    <div class="form-group">
                        <label for="add-age">分数</label>
                        <input type="text" class="form-control" id="add-score" placeholder="输入分数" name="score">
                    </div>
                    <div class="form-group">
                        <label for="add-sex">性别</label>
                        <select class="form-control" id="add-sex" name="sex">
                            <option value="1" name="sex">男</option>
                            <option value="2" name="sex">女</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="insertStudent()">确定</button>
            </div>
        </div>
    </div>
</div>

<!--修改学生信息的模态框-->
<div class="modal fade" id="updateStudentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改学生信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formUpdateStudent">
                    <input type="text" hidden="hidden" id="update-id" name="id">
                    <div class="form-group">
                        <label for="add-name">姓名</label>
                        <input type="text" class="form-control" id="update-name" placeholder="输入姓名" name="name">
                    </div>
                    <div class="form-group">
                        <label for="add-no">学号</label>
                        <input type="text" class="form-control" id="update-no" placeholder="输入学号" name="no">
                    </div>
                    <div class="form-group">
                        <label for="add-password">密码</label>
                        <input type="password" class="form-control" id="update-password" placeholder="输入密码"
                               name="password">
                    </div>
                    <div class="form-group">
                        <label for="add-age">年龄</label>
                        <input type="text" class="form-control" id="update-age" placeholder="输入年龄" name="age">
                    </div>
                    <div class="form-group">
                        <label for="add-age">分数</label>
                        <input type="text" class="form-control" id="update-score" placeholder="输入分数" name="score">
                    </div>
                    <div class="form-group">
                        <label for="add-sex">性别</label>
                        <select class="form-control" id="update-sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateConfirm">确认修改</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">

    /**
     * 初始化数据
     */
    function loadData() {
        $('#stuTable').bootstrapTable("destroy");
        $('#stuTable').bootstrapTable({
            url: "/api/student/getByPage",
            pageSize: 5,//分页每页数据条数
            pageNumber: 1,//首页的页码
            pagination: true,
            striped: true,//没搜到,等下试一下
            singleSelect: false,
            sidePagination: "server",
            queryParams: (params) => {
                let paraObj = {
                    size: params.limit,
                    page: params.offset / params.limit,
                    sort: "id",
                    direct: "desc",
                    name: $("#searchName").val(),
                    sex: $("#searchSex").val(),
                    no: $("#searchNo").val()

                }
                return paraObj
            },
            columns: [{
                field: 'id',
                title: '编号',
                width: 150,
            }, {
                field: 'name',
                title: '姓名',
                width: 150,
            }, {
                field: 'sex',
                title: '性别',
                width: 150,
                formatter: (value, row, index) => {
                    if (row.sex === 0) {
                        return "未知";
                    } else if (row.sex === 1) {
                        return "男"
                    } else {
                        return "女"
                    }

                }
            }, {
                field: 'score',
                title: '成绩',
                width: 150,
            }, {
                field: 'no',
                title: '学号',
                width: 150,
            }, {
                title: '操作',
                width: 150,
                formatter: (value, row) => {
                    return "<a onclick='updateStudent("+row.id+")'>修改</a>";
                }
            }, {
                title: '操作',
                width: 150,
                formatter: (value, row) => {
                    return "<a onclick='deleteStudent("+row.id+")'>删除</a>";
                }
            }],
        })


    }// end of loadData
    loadData()
    search = () => {
        loadData()
    }
    insertStudent = () => {
        let formData = $("#formInsertStudent").serialize()
        $.ajax({
            url: "/api/student",
            method: "POST",
            data: formData,
            success: (rs) => {
                // 取消模态框
                $("#addStudentModal").modal("hide")
                // 重新加载数据
                loadData()
            }
        })
    }
    /**
     * 修改用户信息
     * 参数为id
     */
    updateStudent = (id) => {
        // 打开模态框
        $("#updateStudentModal").modal("show")
        $.ajax({
            url: "/api/student/id/" + id,
            method: "GET",
            success: (rs) => {
                // 设置模态框的数据
                $("#update-id").val(rs.id)
                $("#update-name").val(rs.name)
                $("#update-no").val(rs.no)
                $("#update-password").val(rs.password)
                $("#update-sex").val(rs.sex)
                $("#update-age").val(rs.age)
                $("#update-score").val(rs.score)
            }
        })

    }
    /**
     * modal中确认修改学生信息
     */
    $("#updateConfirm").click(() => {
        // 获取序列化信息
        let data = $("#formUpdateStudent").serialize()
        //传给后端修改
        $.ajax({
            url: "/api/student",
            method: "PUT",
            data: data,
            success: () => {
                //刷新界面
                loadData()
                //关闭模态框
                $("#updateStudentModal").modal("hide")
            }
        })


    })
    /**
     * 删除学生
     * 参数为id
     */
    deleteStudent = (id) => {
        if (confirm("确认删除?")) {
            $.ajax({
                url: "/api/student",
                method: "DELETE",
                data: {"id": id},
                success: (rs) => {
                    // 重新加载数据
                    loadData()
                }
            })
        }


    }

</script>
</body>
</html>